<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="referrer" content="no-referrer" />
    <title>订单列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!-- bootstrap-css -->
    <link rel="stylesheet" th:href="@{/lib/merchant/css/bootstrap.min.css}" >
    <!-- //bootstrap-css -->
    <!-- Custom CSS -->
    <link th:href="@{/lib/merchant/css/style.css}" rel='stylesheet' type='text/css' />
    <link th:href="@{/lib/merchant/css/style-responsive.css}" rel="stylesheet"/>
    <!-- font CSS -->
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
    <!-- font-awesome icons -->
    <link rel="stylesheet" th:href="@{/lib/merchant/css/font.css}" type="text/css"/>
    <link th:href="@{/lib/merchant/css/font-awesome.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/lib/merchant/css/morris.css}" type="text/css"/>
    <!-- calendar -->
    <link rel="stylesheet" th:href="@{/lib/merchant/css/monthly.css}">
    <!-- //calendar -->
    <!-- //font-awesome icons -->
    <script th:src="@{/lib/merchant/js/jquery2.0.3.min.js}"></script>
    <script th:src="@{/lib/merchant/js/raphael-min.js}"></script>
    <script th:src="@{/lib/merchant/js/morris.js}"></script>

    <style>
        input {
            background-color: #8b5c9e;
            border-radius: 5px;
            border: 0;
            outline: none;
            width: 90px;
            height: 30px;
            color: white;
            font-weight: bold;
        }
        input:hover{
            opacity: 0.8;
        }
        select {
            background-color: #8b5c9e;
            border-radius: 5px;
            font-weight: bold;
            color: white;
        }
        table {
            background-color: rgba(255, 255, 255, 0.7);
            border: 3px solid crimson;
        }
        table tr {
            border: 1px solid grey;
        }
        table th {
            background: #8b5c9e;
            text-align: center;
            color: white;
        }
        table td {
            font-size: 14px;
            text-align: center;
        }
    </style>
<script>
    function showEditWl(id){
        var win = document.getElementById("win");
        win.style.display='block'
        var orderId = document.getElementById("order_id"+id).value;
        var logisticsId = document.getElementById("wl_id"+id).value;
        var logisticsStatus = document.getElementById("wl_status"+id).value;
        var logisticsServerName = document.getElementById("wl_name"+id).value;
        var info={
            orderId:orderId,
            logisticsId:logisticsId,
            logisticsStatus:logisticsStatus,
            logisticsServerName:logisticsServerName
        }
        document.getElementById("orderId_last").value=orderId;
        document.getElementById("logisticsStatus_"+logisticsStatus).checked=true
        document.getElementById("logisticsId_last").value=logisticsId;
        document.getElementById("logisticsServerName_last").value=logisticsServerName;
        console.log("订单物流状态",info)
    }

    function cacleEditWl(){
        var win = document.getElementById("win");
        win.style.display='none'
    }

    function toEditWl(){
        let orderId=document.getElementById("orderId_last").value;
        let logisticsStatus=0;
        if(document.getElementById("logisticsStatus_0").checked){
            logisticsStatus=0;
        }
        if(document.getElementById("logisticsStatus_1").checked){
            logisticsStatus=1;
        }
        if(document.getElementById("logisticsStatus_2").checked){
            logisticsStatus=2;
        }
        if(document.getElementById("logisticsStatus_9").checked){
            logisticsStatus=9;
        }
        let logisticsId=document.getElementById("logisticsId_last").value;
        let logisticsServerName=document.getElementById("logisticsServerName_last").value;
        let jsonData={
            orderId:orderId,
            logisticsStatus:logisticsStatus,
            logisticsId:logisticsId,
            logisticsServerName:logisticsServerName
        }

        $.ajax({
            url:"/merchant/editWl" , // 请求路径
            type:"POST" , //请求方式
            //data: "username=jack&age=23",//请求参数
            contentType: "application/json",
            data:JSON.stringify(jsonData),
            success:function (data) {
                console.log(data)
                if(data.code=="200"){
                    window.location="/merchant/order"
                } else {
                    alert(data.msg)
                }
            },//响应成功后的回调函数
            error:function () {
                alert("err")
            },//表示如果请求响应出现错误，会执行的回调函数

            dataType:"json"//设置接受到的响应数据的格式
        });
    }
</script>
</head>
<body style="position: relative">

<!-- 这是一个模态框 -->
<div style="width:100%;height:0px;position: absolute;z-index: 99999;background-color:red;display: none;" id="win">
    <div style="background:rgba(255,200,200,1);border:1px solid red;width:300px;margin-left: auto;margin-right:auto;margin-top:100px;height:300px;">
        <div style="background-color: grey">物流信息编辑</div>
        <div>
            <div>
                <b>订单编号:</b>
                <input id="orderId_last" placeholder="订单id" style="background-color: grey;width: 60%;margin-left: 10%;border:1px solid black" readonly/>
            </div>
            <div>
                <b>物流状态:</b>
                <br>
                <label><input id="logisticsStatus_0" type="radio" name="logisticsStatus_last" value="0"><b>未发货</b></label>
                <label><input id="logisticsStatus_1" type="radio" name="logisticsStatus_last" value="1"><b>已发货</b></label>
                <label><input id="logisticsStatus_2" type="radio" name="logisticsStatus_last" value="2"><b>已收货</b></label>
                <label><input id="logisticsStatus_9" type="radio" name="logisticsStatus_last" value="9"><b>已退回</b></label>
            </div>

            <div>
                <b>物流单号:</b>
                <input class="wl" id="logisticsId_last" placeholder="" style="color:white;background-color: black;width: 60%;margin-left: 10%;border:1px solid black"/>
            </div>
            <div>
                <b>物流厂家:</b>
                <input class="wl" id="logisticsServerName_last" placeholder="" style="color:white;background-color: black;width: 60%;margin-left: 10%;border:1px solid black"/>
            </div>
            <div style="text-align: center;padding-top:10px;">
                <input type="button" onclick="toEditWl()" value="提交" style="background-color: blue"/>
                <input type="button" onclick="cacleEditWl()" value="取消" style="background-color: blue"/>
            </div>
        </div>
    </div>
</div>

<section id="container">
    <!--header start-->
    <header class="header fixed-top clearfix" th:include="merchant/common/model::header"></header>
    <!--header end-->
    <!--sidebar start-->
    <aside  th:include="merchant/common/model::aside"></aside>
    <!--sidebar end-->

    <!--main content start-->
    <section id="main-content">
        <section class="wrapper">
            <select style="display: inline;width: 100px;height:28px;position: relative;left: 2.5%;" onchange="updateFlag(this.value)">
                <option selected th:if="${flag==2}" value="2">全部订单</option>
                <option th:if="${flag!=2}" value="2">全部订单</option>
                <option selected th:if="${flag==1}" value="1">已支付</option>
                <option th:if="${flag!=1}" value="1">已支付</option>
                <option selected th:if="${flag==0}" value="0">未支付</option>
                <option th:if="${flag!=0}" value="0">未支付</option>
            </select>
            <form th:action="@{/merchant/search-order}" style="position: relative;left: 32px;display: inline" method="post">
                <input id="order" name="order" style="display: inline;width: 250px;color: grey;font-weight: normal;background: white;height: 28px" placeholder="通过订单号查找...">
                <input type="submit" value="搜索"
                       onclick="if (document.getElementById('order').value==''){alert('请输入订单号');return false;} ">
            </form>
            <div>
                &nbsp;
            </div>
            <h3 th:if="${orderList.size()==0}" style="color:grey;position:absolute;left: 55%;top: 50%;transform: translate(-50%,-50%)">
                这里还没有任何订单信息！！
            </h3>
            <form th:action="@{/merchant/order}" method="get">
                <table th:if="${orderList.size()!=0}" style="position:relative;left:50%;width: 95%;transform: translate(-50%,0)">
                    <tr style="height: 36px">
                        <th>订单编号</th>
                        <th>商品信息</th>
                        <th>支付信息</th>
                        <th>收货信息</th>
                        <th>物流信息</th>
                        <th>操作</th>
                    </tr>
                    <tr style="height: 80px" th:each="order : ${orderList}">
                        <td style="text-align: left">
                            <span><b>编号:&nbsp;</b><span th:text="${order.getOrderId()}"></span></span>
                            <br>
                            <span><b>建单时间:&nbsp;</b><span th:text="${#dates.format(order.getCreateTime(),'yyyy-MM-dd HH:mm:ss')}"></span></span>
                        </td>
                        <td style="text-align: left">
                            <span><b>商品编号:</b><span th:text="${order.getGoodsId()}"></span></span>
                            <br>
                            <span><b>商品数量:</b><span th:text="${order.getGoodsNum()}"></span></span>
                        </td>
                        <td style="text-align: left">
                            <span><b>订单金额</b><span th:text="'$'+${order.getOrderPrice()}"></span></span>
                            <br>
                            <span th:if="${order.getOrderState()==1}"><b>支付状态:</b><span >已支付</span></span>
                            <span th:if="${order.getOrderState()!=1}"><b>支付状态</b><span >未支付</span></span>
                            <br>
                            <span th:if="${order.getOrderState()==1}"><b>支付时间:</b><span th:text="${#dates.format(order.getPayTime(),'yyyy-MM-dd HH:mm:ss')}"></span></span>
                            <span th:if="${order.getOrderState()!=1}"><b>支付时间:</b><span>--</span></span>
                        </td>
                        <td style="text-align: left">
                            <span><b>联系人:</b><span th:text="${order.getUserName()}"></span></span>
                            <br>
                            <span><b>电话:</b><span th:text="${order.getUserPhone()}"></span></span>
                            <br>
                            <span><b>地址:</b><span th:text="${order.getUserAddress()}"></span></span>
                        </td>
                        <td style="text-align: left">
                            <div style="display: none;">
                                <input th:id="'order_id'+${order.id}" th:value="${order.getOrderId()}"></input>
                                <br>
                                <input th:id="'wl_status'+${order.id}" th:value="${order.getLogisticsStatus()}"></input>
                                <br>
                                <input th:id="'wl_id'+${order.id}" th:value="${order.getLogisticsId()}"></input>
                                <br>
                                <input th:id="'wl_name'+${order.id}" th:value="${order.getLogisticsServerName()}"></input>
                            </div>
                            <span th:if="${order.getLogisticsStatus()==0}"><b>物流状态:</b>未发货</span>
                            <span th:if="${order.getLogisticsStatus()==1}"><b>物流状态:</b>已发货</span>
                            <span th:if="${order.getLogisticsStatus()==2}"><b>物流状态:</b>已送达</span>
                            <span th:if="${order.getLogisticsStatus()==9}"><b>物流状态:</b>退回</span>
                            <br>
                            <span><b>物流编号:</b><span th:text="${order.getLogisticsId()}"></span></span>
                            <br>
                            <span><b>服务商:</b><span th:text="${order.getLogisticsServerName()}"></span></span>
                        </td>
                        <td>
                            <input type="button" th:onclick="|javascript:showEditWl(${order.id})|" th:value="编辑物流信息"/>
                        </td>
                    </tr>
                    <tr style="height: 100px;text-align: right">
                        <td colspan="13">
                            <input type="submit" value="上一页" onclick="delPage()">
                            [[${page}]]/[[${allPage}]]
                            <input type="submit" value="下一页" onclick="addPage()">
                        </td>
                    </tr>
                </table>
                <input type="number" hidden name="flag" id="flag" th:value="${flag}">
                <input type="number" hidden name="page" id="page" th:value="${page}">
            </form>
            <br/><br/><br/>
        </section>
    </section>
    <!--main content end-->
</section>
<script th:inline="javascript">
    var page = document.getElementById('page');
    var flag = document.getElementById('flag');
    function addPage(){
        if (page.value < [[${allPage}]]){
            page.value = page.value-1+2;
        }else{
            alert("当前是最后一页");
        }
    }
    function delPage(){
        if (page.value > 1){
            page.value = page.value-1;
        }else{
            alert("当前是第一页");
        }
    }
</script>
<script th:include="merchant/common/model :: alertMsg"></script>

<script th:src="@{/lib/merchant/js/bootstrap.js}"></script>
<script th:src="@{/lib/merchant/js/jquery.dcjqaccordion.2.7.js}"></script>
<script th:src="@{/lib/merchant/js/scripts.js}"></script>
<script th:src="@{/lib/merchant/js/jquery.slimscroll.js}"></script>
<script th:src="@{/lib/merchant/js/jquery.nicescroll.js}"></script>
<script type="text/javascript" th:src="@{/lib/merchant/js/flot-chart/excanvas.min.js}"></script>
<script th:src="@{/lib/merchant/js/jquery.scrollTo.js}"></script>
<!-- morris JavaScript -->
<script>
    $(document).ready(function() {
        //BOX BUTTON SHOW AND CLOSE
        jQuery('.small-graph-box').hover(function() {
            jQuery(this).find('.box-button').fadeIn('fast');
        }, function() {
            jQuery(this).find('.box-button').fadeOut('fast');
        });
        jQuery('.small-graph-box .box-close').click(function() {
            jQuery(this).closest('.small-graph-box').fadeOut(200);
            return false;
        });

        //CHARTS
        function gd(year, day, month) {
            return new Date(year, month - 1, day).getTime();
        }

        // graphArea2 = Morris.Area({
        //     element: 'hero-area',
        //     padding: 10,
        //     behaveLikeLine: true,
        //     gridEnabled: false,
        //     gridLineColor: '#dddddd',
        //     axes: true,
        //     resize: true,
        //     smooth:true,
        //     pointSize: 0,
        //     lineWidth: 0,
        //     fillOpacity:0.85,
        //     data: [
        //         {period: '2015 Q1', iphone: 2668, ipad: null, itouch: 2649},
        //         {period: '2015 Q2', iphone: 15780, ipad: 13799, itouch: 12051},
        //         {period: '2015 Q3', iphone: 12920, ipad: 10975, itouch: 9910},
        //         {period: '2015 Q4', iphone: 8770, ipad: 6600, itouch: 6695},
        //         {period: '2016 Q1', iphone: 10820, ipad: 10924, itouch: 12300},
        //         {period: '2016 Q2', iphone: 9680, ipad: 9010, itouch: 7891},
        //         {period: '2016 Q3', iphone: 4830, ipad: 3805, itouch: 1598},
        //         {period: '2016 Q4', iphone: 15083, ipad: 8977, itouch: 5185},
        //         {period: '2017 Q1', iphone: 10697, ipad: 4470, itouch: 2038},
        //
        //     ],
        //     lineColors:['#eb6f6f','#926383','#eb6f6f'],
        //     xkey: 'period',
        //     redraw: true,
        //     ykeys: ['iphone', 'ipad', 'itouch'],
        //     labels: ['All Visitors', 'Returning Visitors', 'Unique Visitors'],
        //     pointSize: 2,
        //     hideHover: 'auto',
        //     resize: true
        // });


    });
</script>
<!-- calendar -->
<script type="text/javascript" th:src="@{/lib/merchant/js/monthly.js}"></script>
<script type="text/javascript">
    $(window).load( function() {

        // $('#mycalendar').monthly({
        //     mode: 'event',
        //
        // });
        //
        // $('#mycalendar2').monthly({
        //     mode: 'picker',
        //     target: '#mytarget',
        //     setWidth: '250px',
        //     startHidden: true,
        //     showTrigger: '#mytarget',
        //     stylePast: true,
        //     disablePast: true
        // });

        switch(window.location.protocol) {
            case 'http:':
            case 'https:':
                // running on a server, should be good.
                break;
            case 'file:':
        }

    });
</script>
<script th:inline="javascript">
    var page = document.getElementById('page');
    var flag = document.getElementById('flag');
    function addPage(){
        if (page.value < [[${allPage}]]){
            page.value = page.value-1+2;
        }else{
            alert("当前是最后一页");
        }
    }
    function delPage(){
        if (page.value > 1){
            page.value = page.value-1;
        }else{
            alert("当前是第一页");
        }
    }
    function updateFlag(temp){
        flag.value = temp;
        window.location.href = "/merchant/order?flag="+temp;
    }
</script>
<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script th:include="merchant/common/model :: alertMsg"></script>

<!-- //calendar -->
</body>
</html>
